﻿@section head{
    <style>
        .ele5 {
            border: 1px solid #ccc;
            overflow-y: scroll;
            overflow-x: hidden;
            display: inline-block;
            height: 300px;
            width: 100%;
            display: none;
            position: absolute;
            top: 100%;
            background-color: #fff;
            z-index: 100;
        }
    </style>
}
@section body {
    <form class="layui-form" action="">
        <div class="mainBox" style="background-color:#fff">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">菜单名称:</label>
                    <div class="layui-input-block">
                        <input type="text" name="Name" lay-verify="required" placeholder="请输入菜单" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">菜单排序:</label>
                    <div class="layui-input-block">
                        <input type="number" name="SortIndex" lay-verify="required" placeholder="请输入内容" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">上级菜单:</label>
                    <div class="layui-input-block">
                        <input type="text" id="ParentName" name="ParentName" lay-verify="required" placeholder="请选择" readonly="readonly" autocomplete="off" class="layui-input">
                        <div id="demoTree2" class="dtree ele5" lay-filter="data5" data-id="0"></div>
                        <input class="layui-hide" id="ParentID" name="ParentID" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单链接:</label>
                    <div class="layui-input-block">
                        <input type="text" name="NavigateUrl" placeholder="请输入内容" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标:</label>
                    <div class="layui-input-block">
                        <input type="text" name="ImageUrl" placeholder="请输入内容" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">浏览权限:</label>
                    <div class="layui-input-block">
                        <input type="text" name="ViewPowerName" placeholder="请输入内容" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单备注:</label>
                    <div class="layui-input-block">
                        <textarea name="Remark" placeholder="请输入内容" class="layui-textarea" style="height:100px;"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="menu-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
}
@section script {

    <script>
        layui.use(['form', 'view', 'dtree'], function () {
            let form = layui.form;
            let view = layui.view;
            var dtree = layui.dtree;
            var $ = layui.$;

            var DemoTree2;
            $("[name='ParentName']").on("click", function (e) {
                e.stopPropagation();
                if (!DemoTree2) {
                    //layui风格数据格式
                    DemoTree2 = dtree.render({
                        elem: "#demoTree2",
                        method: "post",
                        width: "100%",
                        //url: '../layuiadmin/json/dtree/demoTree3.json',
                        url: 'PostNewMenuListJson',
                        dataStyle: "layuiStyle",  //使用layui风格的数据格式
                        dataFormat: "list",  //配置data的风格为list
                        response: { message: "msg", statusCode: 0, treeId: "ID", parentId: "ParentID", title: "Name" },  //修改response中返回数据的定义
                        //checkbar: true //开启复选框
                        request: {
                            __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value

                        }

                    });
                }
                $("#demoTree2").show();

            })// 对应的js

            dtree.on("node('demoTree2')", function (obj) {
                $("[name='ParentName']").val(obj.param.context);
                $("#ParentID").val(obj.param.nodeId);
                $("#demoTree2").hide();
            });

            $(document).on("click", function () {
                $("#demoTree2").hide();
            })

            //监听提交
            form.on('submit(menu-save)', function (data) {
                //请求登入接口
                view.req({
                    url: 'MenuNew_btnSaveClose_Click' //实际使用请改成服务端真实接口
                    , data: { ajaxJson: JSON.stringify(TrimObjToNewObj(data.field)), __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                    , type: "post"
                    , dataType: "json"
                    //, contentType: 'application/json'
                    , done: function (res) {
                        if (res.codeIndex == 1) {
                            layer.msg(res.msg, {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            });
                            //调用父窗体刷新事件,不能是top窗体，有父子关系
                            //window.parent.btnSearchClick();

                            //加载top窗体专用，通过Iframe中id查找对应的窗体
                            top.document.getElementById('13').contentWindow.reload();
                        } else {
                            layer.msg(res.msg, {
                                offset: 't',
                                anim: 6
                            });
                        }

                    }
                });

                return false;
            });
        })
        //遍历对象去值的空格
        function TrimObjToNewObj(obj) {
            for (var index in obj) {
                obj[index] = trim(obj[index]);
            }
            return obj;
        }
        function trim(str) { //删除左右两端的空格
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }
    </script>
}
